<template>
    <el-dialog
        :visible.sync="is_show"
        title="评分申诉"
        width="450px"
        @closed="closed"
        center
        append-to-body
    >
        <el-form
            :model="form"
            ref="form"
        >
            <el-form-item
                prop="subject"
                label="申诉项目"
                :rules="{required: true, message: '请输入申诉项目', trigger: 'blur'}"
            >
            <el-select v-model="form.subject" multiple placeholder="请选择申诉项目">
                <el-option :disabled='optionDisabled.attitude' label="服务态度分" value="态度"></el-option>
                <el-option :disabled='optionDisabled.quelity' label="撰写质量分" value="质量"></el-option>
                <el-option :disabled='optionDisabled.take_time' label="撰写耗时分" value="撰写耗时"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item
                prop="remarks"
                label="申诉原因"
                :rules="{required: true, message: '请输入申诉原因', trigger: 'blur'}"
            >
                <el-input
                    type="textarea"
                    v-model="form.remarks"
                    :show-word-limit="true"
                    :maxlength="500"
                    :rows="4"
                ></el-input>
            </el-form-item>
        </el-form>
        <template slot="footer">
            <el-button @click="is_show = false">取消</el-button>
            <el-button @click="submit" type="primary" v-no-more-click:3000>确认</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            title: '代理人回复',
            is_show: false,
            type: null,
            form: {
                remarks: '',
                subject: ''
            },
            order_id: 0,
            opinion_id: 0,
            optionDisabled: {
                quelity: false,
                attitude: false,
                take_time: false,
            }
        }
    },
    methods: {
        closed() {
            Object.assign(this.$data, this.$options.data())
            this.$refs['form'].resetFields()
        },
        showOn(data) {
            if (data.quelity >= 2.5) {
                this.optionDisabled.quelity = true
            }
            if (data.attitude >= 2.5) {
                this.optionDisabled.attitude = true
            }
            if (data.take_time >= 2.5) {
                this.optionDisabled.take_time = true
            }
            this.order_id = data.id
            this.is_show = true
        },
        submit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    let subjects = this.form.subject.join(',')
                    let params = {
                        remarks: this.form.remarks,
                        subject: subjects
                    }
                    this.$axios.post(`/api/grades/appeals/${this.order_id}`, params).then(res => {
                        if (res.data.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '提交申诉成功'
                            })
                            this.is_show = false
                            this.$emit('refresh')
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.data.message
                            })
                        }
                    }).catch(e => {
                        console.log(e)
                    })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
    .el-dialog__body {
        padding-bottom: 0;
        padding-top: 0;
    }
}
</style>
